<script setup lang="ts">
import { ref,watch, nextTick, onMounted } from 'vue'
import { NCard, NSpin, NDivider, NPopover, NTag, NTabs, NTabPane, NButton, NIcon } from 'naive-ui'
import { ArrowEnterLeft20Filled } from '@vicons/fluent'
import type { Cluster} from '@/components/cluster/ClusterTopology.vue'

interface NodeInfo {
  name: string
  ip: string
  status: string
  role: string
}

const cardRefs = ref<HTMLElement[]>([])

// 伪造的边缘云集群数据
const clusters = ref<Cluster[]>([
  {
    id: 101,
    name: 'Edge-Cluster-A',
    status: 'Ready',
    clusterVersion: 'v1.25.0',
    nodes: [
      { name: 'edge-node-1', ip: '10.0.1.1', status: 'Ready', role: 'worker' },
      { name: 'edge-node-2', ip: '10.0.1.2', status: 'Ready', role: 'worker' }
    ],
    namespaces: ['default', 'iot', 'monitoring']
  },
  {
    id: 102,
    name: 'Edge-Cluster-B',
    status: 'NotReady',
    clusterVersion: 'v1.24.3',
    nodes: [
      { name: 'edge-node-3', ip: '10.0.2.1', status: 'NotReady', role: 'worker' }
    ],
    namespaces: ['default', 'edge-apps']
  }
])

const emit = defineEmits<{
  (e: 'edgeCard-mounted', payload: { cardEls:HTMLElement[]}): void
}>()


watch(
    () => clusters.value,
    () => {
    nextTick(() => {
        emit('edgeCard-mounted', {cardEls:cardRefs.value})
    })
  },{ immediate: true })


const loading = ref(false)

function cardOnClick(cluster: Cluster) {
  console.log('点击了集群:', cluster.name)
}

function nodeTagClick(node: NodeInfo) {
  console.log('点击了节点标签', node)
}

function namespaceTagClick(cluster: Cluster, namespace: string) {
  console.log(`点击了集群 ${cluster.name} 中的命名空间 ${namespace}`)
}

function enterCluster(clusterID: number) {
  alert('进入集群ID: ' + clusterID)
}
</script>

<template>
  <n-spin :show="loading">
    <div class="cluster-card-row">
      <template v-for="cluster in clusters" :key="cluster.id">
        <n-popover trigger="hover" placement="bottom" :width="380">
          <template #trigger>
            <div
              ref="cardRefs"
              :data-id=cluster.id
            > 
            <n-card
              hoverable
              @click="cardOnClick(cluster)"
              class="cluster-card"
              :class="{
                'cluster-ready': cluster.status === 'Ready',
                'cluster-notready': cluster.status === 'NotReady'
              }"
            >
              <div class="cluster-card-content">
                <div class="cluster-name">{{ cluster.name }}</div>
                <img class="k8s-icon" src="/kubernetes.svg" alt="k8s"/>
              </div>
              <n-divider dashed class="cluster-card-divider"/>
              <div class="cluster-info-row">
                <span class="cluster-version-badge">{{ cluster.clusterVersion }}</span>
              </div>
              <div class="cluster-info-row">
                <span
                  class="cluster-status-badge"
                  :class="{
                    'status-ready': cluster.status === 'Ready',
                    'status-notready': cluster.status === 'NotReady'
                  }"
                >
                  {{ cluster.status === 'Ready' ? 'Ready' : 'NotReady' }}
                </span>
              </div>
            </n-card>
            </div>
          </template>
          <n-tabs type="line" size="small" animated>
            <n-tab-pane name="nodes" tab="节点">
              <div class="popover-node-list">
                <div class="popover-table">
                  <div class="popover-header">
                    <div class="col col-name">节点名称</div>
                    <div class="col col-role">角色</div>
                    <div class="col col-ip">IP</div>
                    <div class="col col-status">状态</div>
                  </div>
                  <div
                    v-for="node in cluster.nodes"
                    :key="node.name"
                    class="popover-row"
                  >
                    <div class="col col-name">
                      <n-tag
                        type="info"
                        size="small"
                        class="popover-tag"
                        @click.stop="() => nodeTagClick(node)"
                      >
                        {{ node.name }}
                      </n-tag>
                    </div>
                    <div class="col col-role">
                      <n-tag type="success" size="small" class="popover-tag">
                        {{ node.role }}
                      </n-tag>
                    </div>
                    <div class="col col-ip">
                      <n-tag type="default" size="small" class="popover-tag">
                        {{ node.ip }}
                      </n-tag>
                    </div>
                    <div class="col col-status">
                      <n-tag
                        :type="node.status === 'Ready' ? 'success' : 'warning'"
                        size="small"
                        class="popover-tag"
                      >
                        {{ node.status }}
                      </n-tag>
                    </div>
                  </div>
                </div>
              </div>
            </n-tab-pane>
            <n-tab-pane name="namespaces" tab="命名空间">
              <div class="popover-namespace-list">
                <div class="namespace-grid">
                  <n-tag
                    v-for="ns in cluster.namespaces"
                    :key="ns"
                    type="primary"
                    size="small"
                    class="namespace-tag"
                    @click.stop="() => namespaceTagClick(cluster, ns)"
                  >
                    {{ ns }}
                  </n-tag>
                </div>
              </div>
            </n-tab-pane>
          </n-tabs>
          <div class="popover-footer">
            <n-button type="info" size="small" @click="enterCluster(cluster.id)">
              进入集群
              <n-icon>
                <ArrowEnterLeft20Filled/>
              </n-icon>
            </n-button>
          </div>
        </n-popover>
      </template>
    </div>
  </n-spin>
</template>

<style scoped>
/* 直接复用你原有的样式即可 */
.cluster-card-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.cluster-card { min-width: 180px; max-width: 220px; min-height: 160px; border-radius: 14px; border: 1.5px solid #3b82f622; box-shadow: 0 2px 12px 0 rgba(59, 130, 246, 0.08), 0 1.5px 6px 0 rgba(0, 0, 0, 0.06); background: #fff; transition: box-shadow 0.2s, background 0.2s; padding: 0; }
.cluster-card:hover { box-shadow: 0 4px 24px 0 rgba(59, 130, 246, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.10); border-color: #3b82f655; cursor: pointer; }
.cluster-ready { background: #e8f8f2; }
.cluster-notready { background: #fff8e1; }
.cluster-card-content { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 12px 2px 12px; height: 36px; }
.cluster-name { font-size: 1.08rem; font-weight: 500; color: #222; text-align: left; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k8s-icon { width: 32px; height: 32px; margin-left: 12px; flex-shrink: 0; }
.cluster-info-row { display: flex; align-items: center; margin-left: 12px; margin-top: 2px; margin-bottom: 2px; }
.cluster-version-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: #f3f4f6; color: #555; font-size: 0.92rem; font-weight: 400; letter-spacing: 0.5px; }
.cluster-status-badge { display: inline-block; padding: 2px 12px; border-radius: 12px; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.5px; }
.status-ready { background: #e6f9ed; color: #1a7f4f; border: 1px solid #b6e7ce; }
.status-notready { background: #fff3cd; color: #b8860b; border: 1px solid #ffe082; }
.cluster-card-divider { background-color: black; margin-top: 10px; margin-bottom: 10px; padding-left: 3px; padding-right: 3px; }
.popover-node-list, .popover-namespace-list { display: flex; flex-direction: column; width: 100%; max-height: 400px; padding: 8px 0; overflow-y: auto; }
.popover-table { display: table; width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.popover-header { display: table-row; font-size: 12px; color: #999; font-weight: 500; }
.popover-row { display: table-row; }
.col { display: table-cell; padding: 2px 4px; vertical-align: middle; text-align: left; }
.col-name { width: 35%; }
.col-role { width: 20%; }
.col-ip { width: 25%; }
.col-status { width: 20%; }
.popover-tag { cursor: pointer; user-select: none; white-space: nowrap; }
.namespace-grid { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; justify-items: start; overflow-y: auto; }
.namespace-tag { cursor: pointer; user-select: none; white-space: nowrap; justify-self: start; width: fit-content; max-width: 100%; }
.popover-footer { display: flex; justify-content: flex-end; padding: 8px; border-top: 1px solid #e8e8e8; }
</style>